import { useEffect } from 'react';
import { BellOutlined, EditOutlined, LogoutOutlined } from '@ant-design/icons';
import { useModel } from '@umijs/max';
import { Avatar, Badge, Dropdown } from 'antd';
import { history } from 'umi';
import styles from './index.less';

export default function UserInfo() {
  const { userInfo = {} }: any = useModel('global');
  // console.log('userInfo', userInfo);
  const items: any = [
    {
      key: '1',
      label: (
        <a
          target="_blank"
          rel="noopener noreferrer"
          onClick={() => {
            history.push('/modifyInfo');
          }}
        >
          <EditOutlined /> 修改信息
        </a>
      ),
    },
    {
      key: '2',
      label: (
        <a
          onClick={() => {
            history.push('/login');
            sessionStorage.clear();
          }}
        >
          <LogoutOutlined /> 退出登录
        </a>
      ),
    },
  ];
  return (
    <div className={styles.infoWrap}>
      <div className={styles.notice}>
        <Badge count={5} size="small">
          <BellOutlined />
        </Badge>
      </div>
      <Dropdown menu={{ items }} placement="bottomLeft">
        <div className={styles.info}>
          <Avatar src={userInfo.avatar} />
          <div className={styles.infoText}>
            <div className={styles.textLine}>{userInfo.phone}</div>
            <div className={styles.textLine}>
              {userInfo.nickName
                ? userInfo.nickName.length > 7
                  ? userInfo.nickName.substr(0, 6) + '...'
                  : userInfo.nickName
                : ''}
            </div>
          </div>
        </div>
      </Dropdown>
    </div>
  );
}
